.example {
  overflow: hidden;
  border-radius: 3px;
}

.outer-ng-scrollbar {
  color: black;
  border: 2px solid rgba(0, 0, 0, 0.05);
  --scrollbar-track-color: var(--color-infinite-scroll-example-track-bg);
  --scrollbar-thumb-color: var(--color-nested-virtual-scroll-example);
  --scrollbar-size: 12px;
  --scrollbar-border-radius: 10px;
}

.mat-mdc-card {
  margin-bottom: 5em;
  background-color: var(--color-nested-virtual-scroll-example);
  color: white;

  ::ng-deep {
    .ng-scrollbar-wrapper {
      border-radius: 3px;
      overflow: hidden;
    }

    .scrollbar-control {
      background-color: var(--color-infinite-scroll-example-bar-bg);
    }

    .inner-ng-scrollbar {
      --scrollbar-hover-size: 10px;

      .scrollbar-control {
        background-color: transparent;
      }
    }
  }

  .mat-mdc-card-content {
    height: 400px;
  }
}

.horizontal-scrollable-item {
  height: 180px;
  display: flex;
  flex-direction: column;

  &:nth-child(odd) {
    background: #f1ffff;
  }

  &:nth-child(even) {
    background: #ecf8ff;
  }

  ng-scrollbar {
    flex: 1;
    --scrollbar-track-color: #d3d3d3;
    --scrollbar-padding: 8px;
    --scrollbar-thumb-color: var(--color-accent);
  }
}

h4 {
  margin: 10px;
}

.cards {
  display: grid;
  gap: 12px;
  grid-auto-flow: column;
  margin: 12px;
}
